<template>
  <view class="product" @click="goProduct(item)">
    <v-image :url="item.mainImage.thumbnail_path" v-if="item.mainImage" width="300rpx" />
    <view class="desc">
      <view class="title two-lines">{{ item.title }}</view>
      <view class="title_sub one-lines" v-if="item.title_sub">{{ item.title_sub }}</view>
    </view>
    <v-price :product="item" class="price" />
    <view class="btn">立即下单</view>
  </view>
</template>

<script>
import Image from '../../image/index'
import Price from '../../price/index'
export default {
  props: ['item'],
  components: {
    'v-image': Image,
    'v-price': Price
  },
  methods: {
    goProduct(item) {
      uni.navigateTo({
        url: `/sub_product/detail/index?id=${item.id}`
      })
    }
  }
}
</script>

<style scoped lang="scss">
.product {
  background: white;
  border-radius: 20rpx;
  padding: 20rpx 20rpx 50rpx 20rpx;
  position: relative;
  box-sizing: border-box;
  .desc {
    padding-bottom: 20rpx;
  }
  .title {
    line-height: 1.35em;
    color: #4b4b4b;
    font-weight: 700;
    margin: 20rpx 0 10rpx 0;
    font-size: 28rpx;
  }
  .title_sub {
    color: #bbbbbb;
    font-size: 24rpx;
  }
  .btn {
    background: #ff212a;
    color: white;
    font-size: 24rpx;
    border-radius: 10rpx;
    display: inline-block;
    position: absolute;
    right: 20rpx;
    bottom: 20rpx;
    padding: 5rpx;
  }
}
</style>
